// 控制物体移动
// 控制物体mesh的position属性（mesh继承自Object3d类）
import { useEffect } from 'react';
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

function App() {
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.set(0, 0, 10); // 相机位置
    scene.add(camera);

    // 创建几何体
    const cubeGenomery = new THREE.BoxGeometry(1, 1, 1);
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    const cube = new THREE.Mesh(cubeGenomery, cubeMaterial);
    scene.add(cube);

    // 渲染器
    const myrender = new THREE.WebGLRenderer();
    myrender.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(myrender.domElement);

    // 轨道控制器
    const controls = new OrbitControls(camera, myrender.domElement);

    // 坐标轴
    const axesHelper = new THREE.AxesHelper(5);
    scene.add(axesHelper);
    //############时钟跟踪时间处理动画
    const clock = new THREE.Clock(); // 创建时钟
    function renders() {
      let time = clock.getElapsedTime(); // 获取自时钟启动后的秒数
      let t = time % 5;
      if (cube.position.x < 5) {
        cube.position.x += t * 1;
      } else {
        cube.position.x = 5;
      }
      myrender.render(scene, camera);
      requestAnimationFrame(renders);
    }
    renders();
  }, []);
  return <div></div>;
}
export default App;
